<template>
  <div class="input-field">
    <label v-if="label" :for="id" class="input-label">
      {{ label }}
    </label>
    <div class="input-container">
      <input
        :id="id"
        :type="type"
        :value="modelValue"
        @input="handleInput"
        :class="{
          'with-unit': unit,
          numeric: type === 'number',
          'has-error': error,
        }"
        v-bind="$attrs"
      />
      <span v-if="unit" class="unit-indicator">
        {{ unit }}
      </span>
    </div>
    <p v-if="error" class="error-message">{{ error }}</p>
    <p v-if="hint" class="hint-message">{{ hint }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  modelValue: string | number;
  label?: string;
  type?: string;
  unit?: string;
  error?: string;
  hint?: string;
  id?: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string | number): void;
}>();

const id = computed(
  () => props.id || `input-${Math.random().toString(36).substr(2, 9)}`
);

const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  let value: string | number = target.value;

  if (props.type === "number" && value !== "") {
    value = Number(value);
  }

  emit("update:modelValue", value);
};
</script>

<style scoped>
.input-field {
  width: 100%;
  height: 100%;
}

.input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.input-container input {
  width: 100%;
  height: 100%;
  min-width: 80px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: all 0.2s;
}

.input-container input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.input-container input.with-unit {
  padding-right: 40px;
}

.input-container input.numeric {
  text-align: right;
}

.input-container input.has-error {
  border-color: #ef4444;
}

.unit-indicator {
  position: absolute;
  right: 0;
  padding-right: 12px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: #6b7280;
}

.error-message {
  margin-top: 4px;
  font-size: 14px;
  color: #ef4444;
}

.hint-message {
  margin-top: 4px;
  font-size: 14px;
  color: #6b7280;
}

/* 移除数字输入框的上下箭头 */
.input-field input[type="number"] {
  -moz-appearance: textfield;
}

.input-field input[type="number"]::-webkit-inner-spin-button,
.input-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .input-container input {
    font-size: 14px;
    padding: 6px 10px;
  }

  .input-container input.with-unit {
    padding-right: 32px;
  }

  .unit-indicator {
    padding-right: 8px;
    font-size: 14px;
  }
}
</style>
